{% extends 'layout.html' %}
{% load static %}
{% load permission %}
{% block content %}
<!--    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#deleteModal">-->
<!--      点击对话框-->
<!--    </button>-->
<!--    <input type="button" value="点我" onclick="showDelete();"/>-->
    {% include 'include/search_group.html' %}
    <div style="margin-bottom: 5px;">
        {% add_permission request 'customer_add' %}

        <div style="margin-bottom: 5px; float:right" class="clearfix">
            <form class="form-inline" method="get">
                <div class="form-group">
                    <input name="keyword" type="text" class="form-control"  placeholder="请输入关键字" value="{{ keyword }}">
                </div>
                <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
        </div>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>账户余额</th>
                <th>级别</th>
                <th>注册日期</th>
                <th>交易记录</th>
                <th>重置密码</th>
                {% if request|has_permission:"customer_edit, customer_delete" %}
                    <th>操作</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
        {% for row in queryset %}
            <tr row-id="{{  row.id }}">
                <td>{{ row.id }}</td>
                <td>{{ row.username }}</td>
                <td>{{ row.mobile }} </td>
                <td>{{ row.balance }}</td>
                <td>{{ row.level.title }} ({{ row.level.percent }}%)</td>
                <td>{{ row.create_date|date:"Y-m-d H:i:s" }}</td>
                <td>
                    <a href="{% url 'customer_charge' pk=row.id %}">交易记录</a>
                </td>
                <td>
                    <a href="{% url 'customer_reset' pk=row.id %}">重置密码</a>
                </td>
                {% if request|has_permission:"customer_edit, customer_delete" %}
                <td>
                    {% edit_permission request 'customer_edit' pk=row.id %}
                    {% delete_permission request 'customer_delete' pk=row.id %}
                </td>
                {% endif %}
            </tr>
        {% endfor %}
      </tbody>
    </table>

    <ul class="pagination">
        {{ pager_string }}
    </ul>


    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
      <div class="modal-dialog" role="document">
          <div class="alert alert-danger alert-dismissible fade in" role="alert">
              <h4>是否确定要删除？</h4>
              <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
              <p>
                <button type="button" class="btn btn-danger" id="btnConfirmDelete">确 定</button>
                <button type="button" class="btn btn-default" id='btnCancelDelete'>取 消</button>
                <span style="color: red;" id="deleteError"></span>
              </p>
          </div>
        </div>
      </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/delete_modal.js' %}"></script>
    <script>
    let DELETE_ID;
    let DELETE_URL = "{% url 'customer_delete' %}";
    </script>
{% endblock %}